<template>
  <div>
    <!-- 添加角色 -->

    <!-- 面包屑导航 -->
    <Crumbs></Crumbs>

    <button class="roleBtn">添加角色</button>

    <div class="roleBox">
      <el-form ref="form" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="rolename" style="width: 300px"></el-input>
        </el-form-item>
        <h2>权限设置</h2>
        <div class="r_setting">
          <el-row v-for="item in tabledata" :key="item.id">
            <el-checkbox el-checkbox :checked="item.checked" :model="item.checked" @change="choice(item)" class="set">{{ item.jurisdiction }}</el-checkbox>
          </el-row>
        </div>
        <el-form-item>
          <el-button type="primary" @click="preservation">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getXaddroleAdmin, getXjurisdiction, getXroleAdmin } from '../../../api'
import Crumbs from '../Crumbs.vue'
import lodash from 'lodash'
export default {
  components: { Crumbs },
  data() {
    return {
      rolename: '',
      checked: false,
      tabledata: [],
      arr: [],
    }
  },
  methods: {
    //复选框
    choice(item) {
      console.log(item.id)
      item.checked = !item.checked
      // console.log(item.checked);
      if (item.checked) {
        this.arr.push(item.jurisdiction)
      } else {
        lodash.pull(this.arr, item.jurisdiction)
      }
      console.log(this.arr)
    },
    //保存
    preservation() {
      const obj = {
        id: this.tabledata.id,
        rolename: this.rolename,
        jurisdiction: this.arr.toString(),
      }
      console.log(this.rolename)
      getXaddroleAdmin(obj).then((res) => {
        // console.log(res);
      })
      getXroleAdmin().then((res) => {
        // console.log(res);
        this.tableData = res.data
      })
      this.$router.push('/roleAdmin')
    },
  },
  created() {
    getXjurisdiction().then((res) => {
      console.log(res)
      this.tabledata = res.data
      this.tabledata.map((item) => {
        if (item.checked == 1) {
          item.checked = true
          this.arr.push(item.jurisdiction)
        } else {
          item.checked = false
          // lodash.pull(this.arr,item.id)
        }
      })
    })
  },
}
</script>

<style lang="scss" scoped>
.roleBtn {
  width: 100px;
  height: 30px;
  border: none;
  margin: 20px 0px 40px 30px;
  border-radius: 10px;
}
.roleBox {
  width: 85%;
  margin: auto;
}
.r_setting {
  width: 1000px;
  border: 1px solid lightgray;
  margin: 20px auto;
  .set {
    margin: 20px 50px;
  }
}
</style>
